跳到主要内容

Canvas 2D API 新功能

新增 Path2D 对象​

允许用户储存路径，简化了 canvas 绘制代码，并提升了速度。可以有三种方式创建 Path2D 对象：

new Path2D(); // 空的 Path2D
/new Path2D(path); // 复制的 Path2D
new Path2D(d);// 通过 SVG path 字符串创建 Path2D

在 Path2D 中可以使用 Canvas 创建样式。

var circle = new Path2D();
circle.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.stroke(circle);

在 canvas 实际绘制路径时，提供一个可选的 Path2D 路径

ctx.fill(path);
ctx.stroke(path);
ctx.clip(path);

ctx.isPointInPath(path);
ctx.isPointInStroke(path);

点击区域​

点击区域（ hit regions ）需要设置 canvas.hitregions.enabled=true 来进行测试。

CanvasRenderingContext2D.addHitRegion();
CanvasRenderingContext2D.removeHitRegion();
CanvasRenderingContext2D.clearHitRegions();

addHitRegion() 方法在现有的一个路径中或是一个 2D 路径中天界一个点击区域。 MouseEvent 接口有一个扩展的 region 属性，用户可以用来检查鼠标是否点击了该区域。

焦点环​

drawFocusNeed(element) 可以无需属性切换自动支持。如果在 <canvas> 元素中提供的回退元素获得焦点，用户可以使用这个 API 在 canvas 中心绘制一个焦点环。

如果回退元素获得焦点（如切换到一个包含 canvas 的页面），该元素在 canvas 中的像素表示/形成可以绘制一个焦点环来代替当前焦点。

CSS/SVG 过滤器可用于 Canvas​

使用 Path2D 对象​

使用 Path2D 可以绘制直线、矩形、圆形、椭圆以及曲线。

path.moveTo(x,y)将光标移动到指定坐标点
path.lineTo(x,y)在当前坐标与参数中指定的直线终点之间绘制一条直线
path.rect(x,y,height)绘制矩形
path.arc(x,y,startAngle,EndAngle,anticlockwise)绘制圆形货弧形
path.ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,anticlockwise)绘制椭圆或椭圆形圆弧
path.arcTo(x1,y1,x2,y2,radius)绘制圆形曲线或圆弧曲线
path.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)绘制北维塞曲线
path.quadraticCurveTo(cpx,cpy,x,y)绘制二次样条曲线
path.closPath()关闭路径

可以使用图形上下文对象的 fill() 方法填充使用 Path2D 对象绘制的路径所形成的图形，或者使用图形上下文对象的 stroke() 方法绘制使用 Path2D() 对象绘制的路径所形成的图形轮廓：

context.fill(path);
context.stroke(path);
<body>
  <canvas id="canvas" width="600" height="400"></canvas>
</body>
<script>
  var c = document.querySelector('#canvas');
  var t = c.getContext('2d');
  t.fillStyle = '#eef';
  t.fillRect(0, 0, 600, 400);
  for (let i = (n = 0); i < 10; i++) {
    let p = new Path2D();
    p.arc(i * 25, i * 25, i - 10, 0, Math.PI * 2, true);
    p.closePath();
    t.fillStyle = '#f004';
    t.fill(p);
  }
</script>

可以使用 Path2D 对象的 addPath() 方法将一个 Path2D 对象代表的路径添加到另一个 Path2D 对象所代表的路径。

path2.addPath(path1);